import React, { Fragment, PureComponent } from 'react'
import { View, Text, StyleSheet } from 'react-native'
import PropTypes from 'prop-types'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'

export default class PartTitle extends PureComponent {
  static propTypes = {
    title: PropTypes.string,
    rightTitle: PropTypes.string,
    rightPress: PropTypes.func,
    stylePart: PropTypes.object
  }

  render () {
    const { title, rightPress, rightTitle, stylePart } = this.props
    return (
      <View style={[styles.titleContainer, stylePart]}>
        <View style={styles.titleLeft}>
          <Text style={styles.title}>{title}</Text>
        </View>
        <CustomButton style={styles.rightBtn} onPress={rightPress}>
          <Text style={styles.rightBtnText}>{rightTitle}</Text>
          <CustomImage style={styles.rightBtnArrow} source={require('@/imgC/login/input-arrow.png')} />
        </CustomButton>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  titleContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: ScaleS(20),
    paddingVertical: ScaleS(10),
    backgroundColor: '#fff'
  },
  titleLeft: {
    width: ScaleS(100)
  },
  title: {
    fontSize: ScaleT(16),
    fontWeight: '500',
    color: '#3C3C3C'
  },
  rightBtn: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  rightBtnText: {
    fontSize: ScaleT(11),
    color: '#A3A3A3',
    marginRight: ScaleS(5)
  },
  rightBtnArrow: {
    width: ScaleS(5),
    height: ScaleS(10)
  }
})
